<template>
	<view class="page">
		<!-- 菜单 -->
		<view class="menu">
			<view class="leftScroll">
				<view 
				:class="isActive==index?'itemLeftTwo':'itemLeft'" 
				:style="" v-for="(item,index) in leftItems" 
				:key="index" 
				@click="chooseClick(index)">
				{{item.val}}
				</view>
			</view>
			<view class="rightScroll">
				<view class="bigConScro" v-for="(item,index) in array" :key="index">
					<view class="topTitle">{{item.val}}</view>
					<view class="botCitysList">
						<view 
						class="listItems" 
						v-for="(items,citys) in array[0].city" 
						:key="citys">{{items}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				leftItems:[
					{val:'区域'},
					{val:'类别'},
					{val:'工资范围'},
					{val:'包工保障'},
					{val:'福利'},
					{val:'公司'},
					{val:'适合范围'}
				],
			    site:[
					{val:'区域', city:['xx区','xx区','xx区','xx区']},
					{val:'类别', city:['不限','xxx','xxx','xxx']},
					{val:'工资范围', city:['2000以下','2000~4000','4000~6000','6000~8000','8000~10000','10000以上']},
					{val:'包工保障', city:['不限','包工保障']},
					{val:'福利', city:['不限','五险一金','包住','包吃','周末双休','交通补贴']},
					{val:'公司', city:['不限','参考资料','国有','非盈利机构','事业单位','私企']},
					{val:'适合范围', city:['障碍物','语言障碍','精神障碍']}
				],
				array:[]
			}	
		},
		created() {
		    // 初始化数据默认选中第一个
		    this.array.push(this.site[0])
		  },
		methods: {
			chooseClick(index) {
			  this.array = []
			  this.isActive = index;
			  this.array.push(this.site[index])
			},
		}
	}
</script>

<style lang="scss" scoped>
    .page {
        .menu {
            margin-top: 20rpx;
            padding: 0 15px;
            display: flex;
            .leftScroll {
                font-size: 28rpx;
                font-weight: 400;
                .itemLeft{
                    width: 186rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    padding-left: 28rpx;
                    color: #333333;
                    background-color: #F3F3F3;
                }
                .itemLeftTwo {
                    width: 178rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    padding-left: 28rpx;
                    background-color: #E2EDFF;
                    color: #2F77F1;
                    border-left: 4px solid #2F77F1;
                }
            }
            .rightScroll {
                background-color: #FFFFFF;
                width: 502rpx;
                height: 1076rpx;
                .bigConScro{
                    padding: 0 30rpx;
                    .topTitle{
                        margin-top: 20rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                    .botCitysList{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #333333;
                        margin-top: 44rpx;
                        .listItems{
                            margin-bottom: 20rpx;
                        }
                    }
                }
            }
        }
    }
</style>
